<style scoped lang="less">
@navigationRadio:4px;
@navigationWihth:15px;
@navigationTop:100px;
.navigation{
  position: absolute;
  top: @navigationTop;
  right: 0px;
  overflow: hidden;
  transition: all 1s;
  max-width: @navigationWihth;
  max-height: calc(100vh - 180px - @navigationTop / 2);
  overflow-y:scroll;
  &::before{
    content: '';
    display: inline-block;
    background-color: #42b983;
    width: @navigationWihth;
    position: absolute;
    left: 0%;
    top: 0;
    bottom: 0;
    cursor: pointer;
    transition: all .5s;
    border-radius:@navigationRadio 0 0 @navigationRadio; 
  }
  &:hover{
    max-width: 100px;
    &::before{
      left: calc(100% - @navigationWihth);
      border-radius:0 @navigationRadio @navigationRadio 0; 
      background-color: #42b98311;
    }
  }
  &-item{
    max-width: 90px;
    display: block;
    text-align: right;
    padding: 3px;
    margin: 2px @navigationWihth;
    white-space:nowrap;
    font-size: 12px;
    box-shadow: 1px 2px 2px #0001;
    border-radius: @navigationRadio 0 0 @navigationRadio;
    transition: all .5s;
    &:hover{
      box-shadow:inset 1px 2px 2px #0001;
    }
  }
}
.title{
  margin:30px 0 0 0 !important;
  font-weight: 600;
  color: #273849;
  font-size: 1.5em;
  line-height:1.2;
  a{
    font-size: 1.65em;
    margin-right: 0.25em;
  }
}
.conf-title{
  font-weight:700;
  height: 20px;
  line-height: 20px;
  font-size: 15px;
  display: flex;
  align-content: center;
  margin: 10px 0 !important;
  color: #273849;
  &+div{
    margin-left: 20px;
    text-indent: 1em;
    color: #304455;
  }
  &::before{
    content: '';
    display: inline-block;
    background-color: #42b983;//#1890FF
    width: 3px;
    height: 100%;
    margin-right: 15px;
  }
}
</style>

<script>
export default{
  props:["confdata"],
  methods:{
    scrollTo(refname){
      if(this.$refs[refname])
        this.$refs[refname].scrollIntoView({behavior:'smooth'})
    }
  },
  computed:{
    conf(){
      return this.$store.getters.conf
    }
  },
  render(){
    const TITLE = 'title'
    const CONF_TITLE = 'conf-title'
    const {
      modeSample,
      modelInfo,
      verifMode,
      names_del,
      names_target,
      names_id,
      missing,
      homogeny,
      importanceAssessment,
      corr,
      binn,
      regre,
      exchangeParam,
      evaluate,
      modename,
      
    } = this.confdata
    const { conf } = this
    
    const chooseLabel = (list,keyname,valuename,type) => {
      const item = list.find(e=>e[keyname]===type)
      return item? item[valuename]:<span style="red">选项异常</span>
    }
    
    const creat = this.$createElement
    
    // modelInfo
    const { name,description,createTime,saveTime } = modelInfo
    const modelInfoDom = () => (
      <div ref="modelInfo">
        <p class={TITLE}>
          <a onClick={this.scrollTo.bind(this,"modelInfo")}>#</a>
          模型信息
        </p>
        <p class={CONF_TITLE}>模型种类 :</p>
        <div>{modename}</div>
        <p class={CONF_TITLE}>模型名称 :</p>
        <div>{name?name:'NULL'}</div>
        <p class={CONF_TITLE}>模型描述 :</p>
        <div>{description?description:'NULL'}</div>
        <p class={CONF_TITLE}>创建时间 :</p>
        <div>{createTime?createTime:'NULL'}</div>
        <p class={CONF_TITLE}>最近保存 :</p>
        <div>{saveTime?saveTime:'NULL'}</div>
      </div>
    )
    
    // modeSample
    const modeSampleDom = () => {
      if(modeSample.id){
        const {title,time,description,type,targetRow,fileInfo,confInfo} = modeSample
        return (
          <div ref="modeSample">
            <p class={TITLE}><a onClick={this.scrollTo.bind(this,"modeSample")}>#</a>训练样本集</p>
            <p class={CONF_TITLE}>基本信息</p>
            <div>
              <p>样本集名:{title}</p>
              <p>上传时间:{time}</p>
              <p>样本描述:{description}</p>
              <p>目标变量:{targetRow}</p>
              <p>类型:{type?'报文组抽取':'文件上传'}</p>
            </div>
            <p class={CONF_TITLE}>其他信息</p>
            {
              type? (
                <div>
                  <p>抽取类型:{confInfo.chooseType}</p>
                  <p>抽取报文组:{confInfo.rootName}</p>
                  <p>抽取数量:{confInfo.chooseNum}</p>
                </div>
              ):(
                <div>
                  <p>文件名称:{fileInfo.fileName}</p>
                  <p>数据总量:{fileInfo.total}</p>
                </div>
              )
            }
          </div>
        )
      }else return (
        <div ref="modeSample">
          <p class={TITLE}><a onClick={this.scrollTo.bind(this,"modeSample")}>#</a>训练样本集</p>
          <p class={CONF_TITLE}>未选择训练样本</p>
        </div>
      )
    }
    
    // 数据处理 names_id\names_target\names_del\verifMode
    const dataProcessingDom = () => {
      // const { value,dimValue } = verfilter
      const { type,training } = verifMode
      return (
      <div 
        ref="dataProcessing"
      >
        <p class={TITLE}><a onClick={this.scrollTo.bind(this,"dataProcessing")}>#</a>数据处理</p>
        <p class={CONF_TITLE}>变量角色</p>
        <div>
          <p>ID：{names_id&&names_id.length?<span>{names_id.join('、')}</span>:<span>未选择</span>}</p>
          <p>目标变量：{names_target&&names_target.length?<span>{names_target.join('、')}</span>:<span>未选择</span>}</p>
        </div>
        <p class={CONF_TITLE}>变量删除</p>
        <div>
          {names_del&&names_del.length? names_del.map(e=>(<p>删除：{e}</p>)):<p>不删除</p>}
        </div>
        <p class={CONF_TITLE}>验证方式</p>
        <div>
          <span>
            {
              type == 1? '使用全部':
              type == 2? `使用交叉验证(训练集占比为 ${training}%)`:`使用训练/验证集(训练集占比为 ${training}%)`
            }
          </span>
        </div>
      </div>
      )
    }
    
    // 变量粗筛 missing\homogeny
    const variableCoarseSieveDom = () => {
      const { type,value,ismissing } = missing
      const { type:homogeny_type,value:homogeny_value } = homogeny
      return (
        <div ref="variableCoarseSieve">
          <p class={TITLE}><a onClick={this.scrollTo.bind(this,"variableCoarseSieve")}>#</a>变量粗筛</p>
          <p class={CONF_TITLE}>缺失值相关</p>
          <div>
            <p>缺失值操作:<span>{type==1? '删除缺失值':`按照比例删除,阈值为 ${value}`}</span></p>
            <p>缺失值定义:<span>{ismissing==1? '<0':ismissing==2? 'NULL':'其他'}为缺失</span></p>
          </div>
          <p class={CONF_TITLE}>同质性</p>
          <div>
            <p>删除条件:<span>{homogeny_type==1?'单值':''}</span></p>
          </div>
        </div>
      )
    }
    
    // 重要性评价 importanceAssessment
    const importanceAssessmentDom = ()=>{
      const {type,value} = importanceAssessment
      const { label } = this.conf.scImportanceAssessment
      return(
        <div ref="importanceAssessment">
          <p class={TITLE}><a onClick={this.scrollTo.bind(this,"importanceAssessment")}>#</a>重要性评价</p>
          <p class={CONF_TITLE}>评价指标</p>
          <div>
            <p>{chooseLabel(label,'value','title',type)}</p>
          </div>
          <p class={CONF_TITLE}>取值</p>
          <div>
            <p>{value}</p>
          </div>
        </div>
      )
    }
    
    // 变量选择 corr\
    const variableSelectionDom = ()=>{
      const { type:corr_type,value:corr_value } = corr
      const corrdict = ['皮尔森相关系数','斯皮尔曼相关系数','Kendall','基尼方差']
      return (
        <div ref="variableSelection">
          <p class={TITLE} ><a onClick={this.scrollTo.bind(this,"variableSelection")}>#</a>变量选择</p>
          <p class={CONF_TITLE}>相关系数</p>
          <div>
            <p>使用{corrdict[corr_type-1]}</p>
            <p>值为 {corr_value}</p>
          </div>
          <p class={CONF_TITLE}>聚类</p>
          <div>
            <p>使用{'K-MEANS'}聚类</p>
          </div>
          <p class={CONF_TITLE}>共线性</p>
            <div>.......</div>
        </div>
      )
    }
    
    // 变量分箱 binn
    const binnDom = () => {
      if(!binn) return null
      const { type,valueV } = binn
      let {value} = binn
      if(type == 2) value = 0
      const dict = ['用户导入的分箱','等频分箱','卡方分箱','最优分箱']
      return (
        <div ref="binn">
          <p class={TITLE} ><a onClick={this.scrollTo.bind(this,"binn")}>#</a>变量分箱</p>
          <p class={CONF_TITLE}>分箱方式</p>
          <div>
            <p>使用{dict[type]}</p>
            <p>分箱个数为 {valueV}</p>
          </div>
        </div>
      )
    }
    
    // 逻辑回归 regre
    const regreDom = () => {
      const { 
        type,
        restraintimes,error,
        max_depth,max_leaf_nodes,learning_rate,num_leaves
      } = regre
      return (
        <div ref="regre">
          <p class={TITLE}><a onClick={this.scrollTo.bind(this,"regre")}>#</a>生成模型</p>
          <p class={CONF_TITLE}>使用模型</p>
          <div>
            <p>
              {
                type===undefined?'逻辑回归':
                type==0?'决策树':
                type==1?'LightGBM':
                <span style="red">参数异常</span>
              }
            </p>
          </div>
          <p class={CONF_TITLE}>模型参数</p>
          <div>
            {restraintimes!=undefined?<p>收敛次数:{restraintimes}</p>:null}
            {error!=undefined?<p>误差:{error}</p>:null}
            {max_depth!=undefined?<p>最大深度:{max_depth}</p>:null}
            {max_leaf_nodes!=undefined?<p>max_leaf_nodes:{max_leaf_nodes}</p>:null}
            {learning_rate!=undefined?<p>learning_rate:{learning_rate}</p>:null}
            {num_leaves!=undefined?<p>num_leaves:{num_leaves}</p>:null}
          </div>
      </div>
      )
    }
    
    // 评分卡生成 exchangeParam
    const exchangeParamDom = () => {
      if(!exchangeParam) return null
      const {scrate,scscore,scPDO} = exchangeParam
      return (
        <div ref="exchangeParam">
          <p class={TITLE}><a onClick={this.scrollTo.bind(this,"exchangeParam")}>#</a>评分卡生成</p>
          <p class={CONF_TITLE}>交换参数</p>
          <div>
            <p>基准比率为 1:{scrate}</p>
            <p>对应分值为 {scscore}</p>
            <p>翻倍分值为 {scPDO}</p>
          </div>
        </div>
      )
    }
    
    // 模型评估 evaluate
    const evaluateDom = () => {
      if(!evaluate) return null
      const { KS,AUC,Gini,KSScore,KSpercentile,Rsquared,RMSE,NSSE } = evaluate
      return (
      <div ref="evaluate">
        <p class={TITLE}><a onClick={this.scrollTo.bind(this,"evaluate")}>#</a>模型评估</p>
        <p class={CONF_TITLE}>评价指标</p>
        <div>
          <p>KS为 {KS}</p>
          <p>AUC为 {AUC}</p>
          <p>Gini为 {Gini}</p>
          <p>KSScore为 {KSScore}</p>
          <p>KSpercentile为 {KSpercentile}</p>
          <p>Rsquared为 {Rsquared}</p>
          <p>RMSE为 {RMSE}</p>
          <p>NSSE为 {NSSE}</p>
        </div>
      </div>
      )
    }
    
    //导航
    const navigationDom = () => {
      return(
        <div class='navigation'>
          <a class="navigation-item" onClick={this.scrollTo.bind(this,"modelInfo")}>模型信息</a>
          <a class="navigation-item" onClick={this.scrollTo.bind(this,"modeSample")}>训练样本集</a>
          <a class="navigation-item" onClick={this.scrollTo.bind(this,"dataProcessing")}>数据处理</a>
          <a class="navigation-item" onClick={this.scrollTo.bind(this,"variableCoarseSieve")}>变量粗筛</a>
          <a class="navigation-item" onClick={this.scrollTo.bind(this,"importanceAssessment")}>重要性评价</a>
          <a class="navigation-item" onClick={this.scrollTo.bind(this,"variableSelection")}>变量选择</a>
          {binn?
            <a class="navigation-item" onClick={this.scrollTo.bind(this,"binn")}>变量分箱</a>
          :null}
          <a class="navigation-item" onClick={this.scrollTo.bind(this,"regre")}>生成模型</a>
          {exchangeParam?
            <a class="navigation-item" onClick={this.scrollTo.bind(this,"exchangeParam")}>评分卡生成</a>
          :null}
          {evaluate?
            <a class="navigation-item" onClick={this.scrollTo.bind(this,"evaluate")}>模型评价</a>
          :null}
        </div>
      )
    }
    const draw = fun => {
      let dom
      try{
        dom = fun()
      }catch(e){
        const {name,name:{length}} = fun
        const ref = name.slice(0,length-3)
        dom = (
          <div ref={ref}>
            <p class={TITLE}><a onClick={this.scrollTo.bind(this,ref)}>#</a>{ref}</p>
            <p class={CONF_TITLE} style="color:red">参数异常</p>
          </div>
        )
      }
      return dom
    }
    return creat('div',{},[
      draw(modelInfoDom),
      draw(modeSampleDom),
      draw(dataProcessingDom),
      draw(variableCoarseSieveDom),
      draw(importanceAssessmentDom),
      draw(variableSelectionDom),
      draw(binnDom),
      draw(regreDom),
      draw(exchangeParamDom),
      draw(evaluateDom),
      draw(navigationDom),
    ])
	}
}
</script>